<template>
  <el-tabs
    v-loading="tabs.loading"
    v-model="tabs.nativeName"
    @tab-click="handleSwitchTabs"
  >
    <el-tab-pane
      v-for="(item, index) in tabs.tabList"
      :key="item.name + index"
      :label="item.label"
      :name="item.name"
      :disabled="tabs.isDisabled"
    />
  </el-tabs>
</template>
<script>
import {
  NATIVE_NAMES,
  NATIVE_TABS_LIST,
} from '../constants';
import { isBeforeRecordDate } from '@/utils/salePrice';
import { showRecordTabService } from '@/api/commodity/commodityAccessManage/commodityAdd';
export default {
  props: {
    nativeName: {
      type: String,
      default: ''
    },
  },
  data () {
    return {
      tabs: {
        nativeName: '', // 当前tab名
        defaultList: NATIVE_TABS_LIST, // 默认tab列集合,
        tabList: [], // 当前展示的tab列集合
        defaultTabs: [ // 默认一直展示的tab页签
          NATIVE_NAMES.ProductInfo,
          NATIVE_NAMES.AcceptanceStandard,
          NATIVE_NAMES.QualificationType,
          NATIVE_NAMES.ImageTextInfo
        ],
        isDisabled: false,
        loading: false
      },
    }
  },
  created () {
    this.updateShowTabs()
  },
  watch: {
    nativeName: {
      handler (val) {
        this.tabs.nativeName = val
      },
      immediate: true
    }
  },
  methods: {
    // 切换tab页签
    handleSwitchTabs () {
      this.$emit('update:nativeName', this.tabs.nativeName)
      this.$emit('switch-tabs', this.tabs.nativeName)
    },
    // 更新tab展示列
    async updateShowTabs () {
      const recordNo = this.$route.query?.recordNo
      const isBeforeRecord = isBeforeRecordDate(recordNo)
      const data = { recordNo }
      const loadingFn = state => { this.tabs.loading = state }
      const res = await showRecordTabService(data, loadingFn)
      const showTabList = [...this.tabs.defaultTabs, ...(res?.retData ?? [])]
      if (!isBeforeRecord) showTabList.push(NATIVE_NAMES.SaleInfoNew) // 新售价页签
      this.tabs.tabList = this.tabs.defaultList.filter(
        item => showTabList.includes(item.name)
      )
    },
  }
}
</script>
